function glass() {
    var small_box = document.getElementsByClassName("small_box")[0];//小盒子
    var fdj = document.getElementsByClassName("fdj")[0];//小盒子中的黄色区域
    var big_box = document.getElementsByClassName("big_box")[0];//大盒子
    var big_img = document.getElementsByClassName("big_img")[0];//放大的图片
    //鼠标进入小盒子区域内，显示黄色区域和大盒子
    small_box.onmouseenter = function () {
        fdj.className = "fdj active";
        big_box.className = "big_box active";
    }
    //鼠标离开小盒子区域，不显示黄色区域和大盒子
    small_box.onmouseleave = function () {
        fdj.className = "fdj";
        big_box.className = "big_box";
    }
    //鼠标在小盒子内移动
    small_box.onmousemove = function (event) {
        // console.log(event.clientX);//clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标
        // console.log(this.offsetLeft);//当前元素顶部相对于指定定位属性祖先元素左侧的偏移量
        // console.log(fdj.offsetWidth/2);//小黄盒子宽度一半
        var x = event.clientX - this.offsetLeft - fdj.offsetWidth / 2;//事件对象在小盒子内的横向偏移量
        var y = event.clientY - this.offsetTop - fdj.offsetHeight / 2;//竖向偏移量

        if (x < 0) { x = 0 };//当左偏移出小盒子时，设为0
        if (y < 0) { y = 0 };//当上偏移出小盒子时，设为0

        if (x > this.offsetWidth - fdj.offsetWidth) {
            x = this.offsetWidth - fdj.offsetWidth;//当右偏移出小盒子时，设为小盒子的宽度-黄色放大区域宽度
        }
        if (y > this.offsetHeight - fdj.offsetHeight) {
            y = this.offsetHeight - fdj.offsetHeight;//当下偏移出小盒子时，设为小盒子的高度-黄色放大区域高度
        }

        fdj.style.left = x + "px";//黄色放大区域距离小盒子左偏距
        fdj.style.top = y + "px";//黄色放大区域距离小盒子上偏距

        big_img.style.left = -x * 2 + "px";//放大图片移动方向相反，偏移距离加倍
        big_img.style.top = -y * 2 + "px";
    }

}
glass()